<%= turbo_stream_from "issue_#{issue.id}/comments" %>

<div class="cpy-comments-container" data-controller="issue--comments" data-current-user-id="<%= current_user.id %>">
  <div class="mt-2 mb-2 flex justify-between">
    <h3 class="text-base flex items-center gap-1 font-medium text-base-content">
      <span class="opacity-60 flex items-center"><%= icon_for(:comments) %></span>
      <span class="flex items-center"><%= Issue::Comment.model_name.human(count: 2) %></span>
    </h3>
  </div>

  <button data-action="issue--comments#showForm"
    data-issue--comments-target="showFormButton"
    class="btn btn-sm w-full btn-soft">
    <%= t(".write_a_comment") %>
  </button>

  <div id="new_comment_form" class="hidden" data-issue--comments-target="formSection">
    <%= render partial: "issues/comments/form", locals: { comment: Issue::Comment.new(issue: issue) } %>
  </div>

  <div id="issue-comments-list" class="cpy-comments-list mt-6 flex flex-col gap-6">
    <%= render partial: "issues/comments/comment", collection: issue.comments.sort_by(&:created_at).reverse %>
  </div>
</div>